<template>
    <el-dialog :visible.sync="dialog" :title="isAdd ? '创建校群' : '编辑校群'" append-to-body width="600px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px" append-to-body>
             <el-form-item label="校群类型" prop="manageType">
                <el-radio-group v-model="form.manageType">
                    <el-radio  :label="0">集团校群</el-radio>
                    <el-radio  :label="1">普通校群</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="有效期" prop="validity" v-if="form.manageType == 1">
                <!-- 普通校群才会显示 -->
                <el-date-picker
                    v-model="form.validity"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions" style="width: 405px;">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="校群名称" prop="groupName" >
                <el-input v-model="form.groupName" style="width: 405px;" placeholder="请输入校群名称" maxlength="30" clearable/>
            </el-form-item>

            <el-form-item label="群主名称" prop="groupOwner" >
                <el-select v-model="form.groupOwner" clearable  filterable placeholder="请选择群主名称" style="width: 405px;" :disabled="disabled">
                    <el-option
                        v-for="item in owner"
                        :key="item.schId"
                        :label="item.schName"
                        :value="item.schId">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="状态" prop="status">
                <el-radio v-model="form.status" :label="0">启用</el-radio>
                <el-radio v-model="form.status" :label="1">禁用</el-radio>
            </el-form-item>

            <!-- <el-form-item label="校群简介">
                <div style="margin: 20px 0;"></div>
                <el-input v-model="form.remark" style="width: 505px;" rows="5" type="textarea" maxlength="100"  clearable show-word-limit />
            </el-form-item> -->
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="cancel">取消</el-button>
            <el-button :loading="loading" type="primary" @click="doSubmit" >确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { groupSave } from '@/api/request'
// import { valitogroupName } from '@/api/data'
import { validateEmpty, debounce } from '@/utils/validate'
export default {
    props: {
        isAdd: {
          type: Boolean,
          required: true
        },
        owner:{
            type: Array,
            required: true
        }
    },
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now();
                },
                shortcuts: [{
                    text: '一周',
                    onClick(picker) {
                      const date = new Date();
                      date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                      picker.$emit('pick', date);
                    }
                }, {
                    text: '一个月',
                    onClick(picker) {
                      const date = new Date();
                      date.setTime(date.getTime() + 3600 * 1000 * 24 * 30);
                      picker.$emit('pick', date);
                    }
                }, {
                    text: '三个月',
                    onClick(picker) {
                      const date = new Date();
                      date.setTime(date.getTime() + 3600 * 1000 * 24 * 90);
                      picker.$emit('pick', date);
                    }
                }]
            },
            disabled:false,
            loading: false, dialog: false, permissions: [],
            form: {
                id:'',
                validity: '', //有效期
                groupName: '',  //校群名称
                manageType:'',
                status: 0,
                groupOwner:'', //群主id
            },
            rules: {
                groupName:[
                    {validator:validateEmpty,trigger: 'blur',}, 
                    { required: true, trigger: 'blur',message: '请输入4-30字符校群名',min: 4,
                        max: 30,},
                ],
                manageType:[
                    { required: true, trigger: 'blur',message: '请选择校群类型'},
                ],
                validity:[
                    { required: true, trigger: 'blur',message: '请选输入有效期'},
                ],
                groupOwner:[
                    { required: true, trigger: 'blur',message: '请选选择群主'},
                ]

            },
            
        }
    },
    methods: {
        cancel(){
            this.dialog  = false
        },
        doSubmit:debounce(function(){
            this.$refs['form'].validate((valid) => {
                if (valid){
                    this.form.groupName = this.form.groupName.trim()
                    groupSave(this.form).then(res => {
                        this.$notify({
                            title: '保存成功',
                            type: 'success',
                            duration: 2500
                        })
                        this.dialog = false
                        this.$parent.init()
                    })
                }else {
                    return false
                }

            })


        },500),
        toStuId(){
            // if (this.form.stuId) {
            //     valitoStuId(this.form.stuId).then(res => {
            //             if (res.data === false) {
            //                 this.disabled = true
            //                 this.$message({
            //                     message: '用户账号已存在',
            //                     type: 'error'
            //                 });
            //             }else{
            //                 this.disabled = false
            //             }
            //     })
            // }else{
            //     this.disabled = true
            //     return
            // }
        },
    },

}
</script>


<style scoped lang="scss">

</style>
